<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <script type="text/javascript" src="./vue.js"></script>
		<title></title>
	</head>
	<body>
        <!-- 键盘事件
        Vue中常用的按键别名：
                回车：enter
                删除：delete(捕获"删除和退格")
                退出：esc
                空格：space
                换行：tab
                上：up
                下：down
                左：left
                右：right 
             换行(tab) 必须配合keydown使用
        2、Vue未提供的按键，可以使用按键原始的key值去定义，注意要
             转为kabab-case（短横线命名）
        3、系统修饰符（用法特殊):ctrl、alt、shift、meta（徽标键）
            1.   配合keyup使用：按下修饰符的同时，再按下其他键，事件才被触发
            2.   配合keydown使用：正常触发事件。
        4、可以使用keyCode去定义具体的按键
        5、Vue.config.keyCodes.自定义键名 = 键码。 可以去定制按键别名
        

         -->

        <div id="root">
            <h2>欢迎来到{{name}}</h2>
            <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        </div>
	</body>
    <script type="text/javascript">
        Vue.config.productionTip = false //防止VUe启动生成生产提示。
        Vue.config.keyCOdes.Enter = 13 //定义一个别名按键
        new Vue({
            el:'#root',
            data:{
                name:'明日方舟'
            },
            methods:{
                showInfo(e){
                    //if(e.keyCodes !=13 ) return
                       // 13为回车的编码，Code编码
                    console.log(e.key,e.keyCode)
                    //console.log(e.target.value)
                }
            }

        })
    </script>
</html>